<template>
  <div class="page-basic">
    <a-form :model="formState" :rules="basicRules" ref="basicRef">
      <div class="page-basic-hasBtn">
        <a-form-item label="影片ID" name="video_id">
          <a-input
            v-model:value.trim="formState.video_id"
            :maxlength="19"
            :onkeyup="
              () => {
                if (formState.video_id) formState.video_id = formState.video_id.replace(/\D/g, '')
              }
            "
            :onafterpaste="
              () => {
                if (formState.video_id) formState.video_id = formState.video_id.replace(/\D/g, '')
              }
            "
            placeholder="请输入影片ID"
            class="w-[264px]"
          />
          <a-button type="primary" class="ml-[8px]" @click="openFilmDialog">查询影片</a-button>
        </a-form-item>
        <a-form-item label="影片名称" class="ml-[32px]" name="video_name">
          <span>{{ formState.video_name || '-' }}</span>
        </a-form-item>
      </div>
      <div class="page-basic-noBtn">
        <a-form-item label="角色名称" name="role_name">
          <a-input
            v-model:value.trim="formState.role_name"
            :maxlength="50"
            placeholder="请输入角色名称"
            class="w-[264px]"
          />
        </a-form-item>
        <a-form-item name="role_name_alias">
          <a-input
            v-model:value.trim="formState.role_name_alias"
            :maxlength="50"
            placeholder="请输入别名"
            class="w-[264px] ml-[8px]"
          />
        </a-form-item>
        <a-form-item name="role_name_eng">
          <a-input
            v-model:value.trim="formState.role_name_eng"
            :maxlength="50"
            placeholder="请输入英文名"
            class="w-[264px] ml-[8px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-hasBtn">
        <a-form-item label="影人名称" name="person_name">
          <a-input v-model:value.trim="formState.person_name" placeholder="请输入影人名称" class="w-[264px]" />
          <a-button type="primary" class="ml-[8px]" @click="openMakerDialog">查询影人</a-button>
        </a-form-item>
      </div>
      <div class="page-basic-common">
        <div class="page-basic-common-title">角色简介</div>
        <a-form-item label="简介内容" name="role_introduction">
          <a-textarea
            v-model:value="formState.role_introduction"
            placeholder="请输入角色简介"
            show-count
            :maxlength="1000"
            class="w-[600px] h-[170px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-common">
        <div class="page-basic-common-title">角色图片</div>
        <div class="page-basic-common-cover">
          <a-form-item label="角色封面">
            <div>
              <a-radio-group v-model:value="formState.role_cover_type" @change="handleRoleChange">
                <a-radio :value="1" class="mr-[120px]">文件</a-radio>
                <a-radio :value="2">URL</a-radio>
              </a-radio-group>
              <div>
                <div class="flex items-center h-[32px]">
                  <UploadImage
                    v-if="formState.role_cover_type === 1"
                    imgType="1"
                    fileUrl="v1/common/upload"
                    @getImageInfo="getLineImageInfo"
                  >
                    <a-input-search
                      v-model:value="formState.role_cover"
                      enter-button="上传文件"
                      @search="onLineSearch"
                      readOnly
                      class="w-[480px]"
                    />
                  </UploadImage>
                  <a-input
                    v-else
                    v-model:value="formState.role_cover"
                    @blur="handleBlur"
                    placeholder="请输入URL地址"
                    class="w-[480px]"
                  />
                  <a-tooltip placement="right" class="ml-[16px]" color="#fff" v-if="previewImage">
                    <template #title>
                      <img
                        alt="example"
                        class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available]"
                        :src="previewImage"
                      />
                    </template>
                    <a href="javascript:;" class="whitespace-nowrap">
                      <fund-view-outlined class="icon-preview text-[18px]" /> 预览
                    </a>
                  </a-tooltip>
                </div>
                <p class="source-introduce">
                  {{ storage.get('img_type') ? '支持' + storage.get('img_type') + '素材，' : '' }}
                  {{ storage.get('img_size') ? storage.get('img_size') + '以内；' : '' }}建议尺寸212*282px
                </p>
              </div>
            </div>
          </a-form-item>
          <a-form-item label="角色状态" class="mt-[34px]" name="role_status">
            <a-radio-group v-model:value="formState.role_status">
              <a-radio :value="1" class="m-r-120">启用</a-radio>
              <a-radio :value="2">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
        </div>
      </div>
    </a-form>
    <div>
      <CheckFilmDialog @getFilm="getFilm" :videoId="statusState.checkFilmVisible && formState.video_id" />
      <CheckMakerDialog @getMaker="getMaker" :personName="statusState.checkFilmVisible && formState.person_name" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch, inject, onUnmounted } from 'vue'
import CheckFilmDialog from './checkFilmDialog.vue'
import CheckMakerDialog from './checkMakerDialog.vue'
import UploadImage from '@/components/components/upload-image/UploadImage.vue'
import { statusState } from '../../state'
import { formState, resetExtendFunc, isPopularity } from './state'
import { useRouter, useRoute } from 'vue-router'
import apis from '@/apis'
import { storage } from '@/utils/storage'
import { message } from 'ant-design-vue'
const {
  site: { role_add, role_update, role_detail }
} = apis
const router = useRouter()
const route = useRoute()
const roleId = ref()
const siteId = storage.get('siteId')
const basicRef = ref()
const baseUrl: any = inject('baseUrl')
const reg = /^[0-9]{18}/
const basicRules = reactive({
  video_id: [{ required: true, message: '请输入影片ID' }],
  role_name: [{ required: true, message: '请输入角色名称' }]
})

const previewImage = ref() //图片预览地址
//竖版
const onLineSearch = (searchValue: string) => {
  console.log('use value', searchValue)
}
//输入框失焦事件
const handleBlur = (e: any) => {
  previewImage.value = e.target.value
}
const getLineImageInfo = (value: any) => {
  console.log('value: ', value)
  formState.role_cover = value
  if (formState.role_cover_type === 1) return (previewImage.value = baseUrl + value)
  previewImage.value = value
}
//打开查询影片弹窗
const openFilmDialog = () => {
  if (!reg.test(formState?.video_id ?? '')) formState.video_id = undefined
  statusState.checkFilmVisible = true
}
//获取下级传来的数据
const getFilm = (item: any) => {
  formState.video_id = item.video_id
  formState.video_name = item.video_name
}
//打开查询影人弹窗
const openMakerDialog = () => {
  statusState.checkMakerVisible = true
}
//获取下级传来的数据
const getMaker = (item: any) => {
  console.log('item: ', item)
  formState.person_name = item.person_name
  formState.person_id = item.person_id
}
const handleRoleChange = () => {
  basicRef.value.clearValidate(['role_cover'])
  formState.role_cover = ''
  previewImage.value = ''
}
//重置表单
const resetFormFunc = () => {
  basicRef.value?.resetFields()
  formState.role_cover = undefined
  formState.role_cover_type = 1
  formState.person_id = undefined
  formState.role_id = undefined
  //重置扩展信息
  formState.role_keyword = undefined
  formState.role_tags = undefined
  formState.role_pop_add_star = 0
  formState.role_pop_star = 0
  isPopularity.value = false
  formState.role_tags_copy = undefined
  resetExtendFunc()
  console.log('查看影片名称', formState)
}
//获取影人详情
const getRoleDetail = () => {
  role_detail({ role_id: roleId.value }).then((res: any) => {
    console.log('res: ', res)
    Object.assign(formState, res)
    if (formState.role_cover) {
      if (formState.role_cover_type === 1) {
        previewImage.value = baseUrl + formState.role_cover
      } else {
        previewImage.value = formState.role_cover
      }
    }
    //是否开启补偿
    if (formState.role_pop_compensated === 1) {
      isPopularity.value = true
    } else {
      isPopularity.value = false
    }
    formState.role_tags_copy = res.role_tags.map((item: any) => {
      return item.tag_name
    })
    formState.role_pop_star = getMaxScore()
    console.log('extendInfo.role_tags_copy123123: ', formState.role_tags_copy)
    console.log('formState123123: ', formState)
  })
}
const getMaxScore = () => {
  return Math.max(formState.role_pop_add_star, formState.role_pop_star)
}
const validateFunc = () => {
  const params = { ...formState }
  basicRef.value
    .validate()
    .then(() => {
      if (!roleId.value) {
        params.site_id = siteId
        console.log('params: ', params)
        role_add(params).then(() => {
          message.success('保存角色成功')
          resetFormFunc()
          router.back()
        })
      } else {
        params.role_id = roleId.value
        const {
          role_pop_star,
          role_pop_total,
          role_pop_day,
          role_pop_week,
          role_pop_month,
          role_pop_view,
          role_pop_like,
          role_pop_dislike,
          ...data
        } = params
        console.log('data: ', data)
        role_update(data).then(() => {
          message.success('编辑角色成功')
          resetFormFunc()
          router.back()
        })
      }
    })
    .catch(() => {
      console.log(formState, 'formState12322')
      message.warning('请检查必填项是否完整')
    })
}
//页面改变重置扩展信息
watch(
  () => route.name,
  () => {
    resetFormFunc()
  },
  {
    deep: true
  }
)
defineExpose({ validateFunc })
onMounted(() => {
  // getClassList() //获取分类下拉
  roleId.value = router.currentRoute.value.query?.id as string
  console.log('roleId.value: ', roleId.value)
  console.log('页面加载', formState)
  if (!roleId.value) return false
  getRoleDetail()
})
onUnmounted(() => resetFormFunc())
</script>

<style lang="less" scoped>
.page-basic {
  :deep(.ant-form) {
    .m-r-120 {
      margin-right: 120px;
    }

    .m-r-110 {
      margin-right: 110px;
    }

    .m-r-6 {
      margin-right: 6px;
    }

    .ant-form-item-label > label::after {
      content: '';
      position: relative;
      top: -0.5px;
      margin: 0 0 0 16px;
    }

    .ant-form-item-label > label {
      width: 72px;
    }

    .page-basic-hasBtn {
      display: flex;
      flex-wrap: wrap;
      width: 90%;

      .ant-form-item-control-input-content {
        display: flex;
      }
    }

    .page-basic-noBtn {
      display: flex;
      flex-wrap: wrap;
      width: 90%;

      .ant-form-item-control-input-content {
        display: flex;
      }
    }

    .page-basic-common {
      width: 90%;
      padding: 24px 0 0;
      box-sizing: border-box;
      border-bottom: 1px solid #f0f0f0;

      &-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 1.14px;
        font-weight: 500;
        margin-bottom: 24px;
      }

      .ant-table .ant-table-container::after {
        width: 0px;
      }

      .source-introduce {
        font-size: 12px;
        margin-top: 8px;
        color: #bfbfbf;
      }

      .ant-form-item-control-input-content {
        display: flex;

        .ant-radio-group {
          margin: 5px 0 15px !important;
        }
      }
    }
  }

  .bottom-button {
    display: flex;

    .ant-btn {
      margin: 24px 16px 0 0;
    }
  }
}
</style>
